<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const instance = getCurrentInstance();
const pageNum = ref(0);
const selectFun = (num)=>{
  if(num == pageNum.value){
    return
  } else {
    pageNum.value = num
  }
  setTimeout(()=>{
    adjustIframe();
  }, 1)
  
}

const adjustIframe = ()=>{
    let ifm= document.querySelector(".viewiframe");
    ifm.height=document.documentElement.clientHeight;
    ifm.width=document.documentElement.clientWidth;
}

onMounted(() => {
  //console.log(instance.appContext.config)
  adjustIframe();
})

</script>

<template>
  <div>
    <nav>
        <button :class="pageNum===0?'active':''" @click="selectFun(0)">WEBGL1</button>
        <button :class="pageNum===10?'active':''" @click="selectFun(10)">WEBGL1A</button>
        <button :class="pageNum===1?'active':''" @click="selectFun(1)">WEBGL2</button>
        <button :class="pageNum===2?'active':''" @click="selectFun(2)">WEBGPU</button>
        <button :class="pageNum===3?'active':''" @click="selectFun(3)">B3DTiles</button>
    </nav>
    
    <iframe class="viewiframe" v-if="pageNum===0" src="/webgl1" frameborder="0" scrolling="auto" allowTransparency="true"></iframe>
    <iframe class="viewiframe" v-if="pageNum===10" src="/webgl0" frameborder="0" scrolling="auto" allowTransparency="true"></iframe>
    <iframe class="viewiframe" v-if="pageNum===1" src="/webgl2" frameborder="0" scrolling="auto" allowTransparency="true"></iframe>
    <iframe class="viewiframe" v-if="pageNum===2" src="/webgpu" frameborder="0" scrolling="auto" allowTransparency="true"></iframe>
    <iframe class="viewiframe" v-if="pageNum===3" src="/web3dtiles" frameborder="0" scrolling="auto" allowTransparency="true"></iframe>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
nav{
  display:flex;
  background: transparent;
  position: fixed;
  z-index: 99999;
  left: 10px;
  top: 10px;
}
button{
  background: #002030;
  color: #10c2c088;
  border: 1px solid #009688;
  margin: 0 1px;
  padding: 5px 30px;
  cursor: pointer;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  transition: 0.6s;
}
button:hover{
  color: #10c2c0;
}
.active{
  color: #09f3ef;
  background: linear-gradient(to top, #002030, #009688);
}

</style>
